<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
            list-style: none;
        }
        .box{
            width: 500px;
            height: 500px;
            margin: 50px 50px;
            
        }
        .ul-box{
            width: 100%;
            height: 60px;
            display: flex;
        }
        .ul-box li{
            flex:1;
            border-bottom:1px solid red ;
            line-height: 60px;
            text-align: center;
        }
        .content{
            width: 100%;
            height: 440px;
            background-color: skyblue;
        }
        .active{
            background-color: deeppink;
        }
        .normal{
            background-color: #ededed;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="box">
            <ul class="ul-box"  >
                <li v-for="(item,idx) in arr"
                :class="{active:index == idx,normal:index!=idx}"
                    @click="change(idx)"
                >
                {{item.title}}
                </li>
            </ul>
            <div class="content">
                <component :is="arr[index].com"></component>
            </div>
        </div>

    </div>
</body>
<script src="./vue.global.js"></script>
<script>

    //定义组件
    const one ={
        template:`
            <div>
                <h3>一</h3>
            </div>
        `
    }
    const two ={
        template:`
            <div>
                <h3>二</h3>
            </div>
        `
    }
    const third ={
        template:`
            <div>
                <h3>三</h3>
            </div>
        `
    }

    const app= Vue.createApp({
        data(){
            return{
                index:0,
                arr:[
                    {
                        title:'1',
                        com:one,
                    },
                    {
                        title:'2',
                        com:two,
                    },
                    {
                        title:'3',
                        com:third,
                    }
                ],
              
            }
        },
        methods:{
            change(idx){
                this.index = idx
            }
        }
    })
app.mount("#app")

</script>
</html>